<template>
  <div class="loginBox">
    <div class="title">{{ sysName }}</div>
    <div class="inputBox">
      <div class="tri_1"></div>
      <div class="tri_2"></div>
      <div class="tri_3"></div>
      <div class="tri_4"></div>
      <div class="loginTitle">
        <span>登录</span>
      </div>
      <el-input class="bin_input" v-model="username" placeholder="请输入用户名">
        <img
          slot="prefix"
          class="prefix_img"
          :src="require('../assets/username.png')"
        />
      </el-input>
      <el-input
        class="bin_input"
        v-model="password"
        placeholder="请输入密码"
        show-password
      >
        <img
          slot="prefix"
          class="prefix_img"
          :src="require('../assets/password.png')"
        />
      </el-input>
      <el-checkbox-group
        v-model="checked"
        class="bin_checkout"
        style="text-align: left"
      >
        <el-checkbox label="记住密码"></el-checkbox>
      </el-checkbox-group>
      <el-button
        class="bin_button"
        size="small"
        style="width: 100%"
        @click="login"
      >
        登录
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      sysName: process.env.VUE_APP_TITLE,
      username: "admin",
      username: "abc",
      password: "Password1@",
      checked: [],
      // Add your data properties here
    };
  },
  methods: {
    validatePassword(password) {
      const lengthCheck = password.length >= 10;
      const hasLowerCase = /[a-z]/.test(password);
      const hasUpperCase = /[A-Z]/.test(password);
      const hasNumber = /\d/.test(password);
      const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);

      const countTypes = [
        hasLowerCase ? 1 : 0,
        hasUpperCase ? 1 : 0,
        hasNumber ? 1 : 0,
        hasSpecialChar ? 1 : 0,
      ].reduce((sum, val) => sum + val, 0);

      return lengthCheck && countTypes >= 2;
    },
    login() {
      if (!this.validatePassword(this.password)) {
        this.$message({
          message:
            "密码必须是数字、大小写字母和特殊字符中的两者以上的组合，且长度不小于10位",
          type: "warning",
        });
        return false;
      }

      // 校验密码
      this.$store.dispatch("resetState");
      this.$api
        .login({
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          if (res.code === 200) {
            this.$store.dispatch("setToken", res.result.token);
            sessionStorage.setItem("refreshToken", res.result.refreshToken);
            this.$api
              .getUsername()
              .then((res) => {
                if (res.code === 200) {
                  this.$store.dispatch("setUsername", res.result);
                  sessionStorage.setItem("username", res.result);
                  if (this.$route.query.redirect) {
                    this.$router.push(this.$route.query.redirect);
                  } else {
                    this.$router.push("/");
                  }
                }
              })
              .catch((err) => {});
            this.getUsername;
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.loginBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/bg_line.png"), url("../assets/bg.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-attachment: local, fixed;
  background-size: 100% 100%, cover;
  position: relative;

  .title {
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    height: 7vh;
    line-height: 7vh;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    letter-spacing: 0.6vw;
    font-size: 34px;
    color: #ffffff;

    @media (min-width: 1280px) and (max-width: 1440px) {
      letter-spacing: 0.5vw;
    }

    @media screen and (max-width: 1280px) {
      letter-spacing: 4px;
    }
  }

  .inputBox {
    position: relative;
    width: 460px;
    height: 470px;
    background: rgba(2, 82, 107, 0.5);
    box-shadow: inset 0px 0px 40px 1px #02fff4;
    border: 1px solid #1dcdf8;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding: 70px 35px;
    box-sizing: border-box;

    .tri_1,
    .tri_2,
    .tri_3,
    .tri_4 {
      width: 22px;
      height: 22px;
      border-color: #02fff4;
      border-style: solid;
      position: absolute;
    }

    .tri_1 {
      border-left-width: 4px;
      border-top-width: 4px;
      left: -2px;
      top: -2px;
    }

    .tri_2 {
      border-right-width: 4px;
      border-top-width: 4px;
      right: -2px;
      top: -2px;
    }

    .tri_3 {
      border-left-width: 4px;
      border-bottom-width: 4px;
      left: -2px;
      bottom: -2px;
    }

    .tri_4 {
      border-right-width: 4px;
      border-bottom-width: 4px;
      right: -2px;
      bottom: -2px;
    }

    .loginTitle {
      color: #cdfbfe;
      width: 100%;
      border-bottom: 1px solid #02fff4;

      span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 32px;
        width: fit-content;
        height: 50px;
        line-height: 50px;
        display: inline-block;
        border-bottom: 3px solid #02fff4;
      }
    }

    .prefix_img {
      position: absolute;
      top: calc(50% - 12px);
      height: 24px;
      width: 24px;
      display: block;
    }

    ::v-deep .el-input--prefix .el-input__inner {
      padding-left: 36px;
    }

    ::placeholder {
      color: #fff;
    }
  }
}
</style>
